<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
    <title>甘洛县精准扶贫大数据管理平台</title>
    <link rel="stylesheet" type="text/css" href="static/css/basic.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/basic.js"></script>
    <script type="text/javascript" src="static/js/probox.js"></script>
    <script>
        function fullScreen(){
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            };
            return;
        }
    </script>
    <style>
        body {background: url('/static/image/bg.jpg') center center no-repeat fixed;background-size: cover}
        header {height: 60px;line-height: 60px;padding-left: 20px;background: #fff;box-shadow: 0 0 5px rgba(0,0,0,.3)}
        header span {font-size: 20px; font-weight: 900;color: #235b93;}
        header dl {height: 100%;position: absolute;right: 0;top: 0;overflow: scroll;box-sizing: border-box}
        header dt {padding: 0 40px;font-size: 14px;color: #235b93}
        header dd {line-height:40px;padding: 0 40px;text-align: left;background: #fff;border-top:1px solid #eee;display: none}
        header dd:hover {background: #235b93;}
        header dd:hover a {color: #fff}
        header dl:hover dt {background: #235b93;color: #fff}
        header dl:hover dd {display: block}
        #main {margin: 40px}
        #left {width: 30%;padding: 5px;display: inline-block;box-sizing: border-box;background-color: rgba(255,255,255,.2);color: #fff;vertical-align: top}
        .title {padding: 0 15px;line-height: 40px;font-size: 16px;font-weight: bold;background: #235b93}
        .leader li {width: 50%}
        .leader .face {width: 93px;height: 120px;margin: 10px auto;background-size: cover}
        .leader .txt {font-size: 14px;font-weight: 500;text-align: center}

        .tips {line-height: 80px;border:1px solid rgba(255,255,255,.3);text-align: center;box-shadow: 0 0 5px rgba(255,255,255,.5);font-size: 16px}
        .tips b {margin: 0 15px;font-size: 30px}
        .stat {padding: 20px;font-size: 14px}
        .stat li {width: 50%;padding: 5px 10px;box-sizing: border-box;text-align: right}
        .stat span {float: left}
        .stat .dot {width: 100%}
        #right {width: 70%;padding-left: 20px;box-sizing: border-box;display: inline-block;color: #fff}
        #right table {width: 100%;margin-top: 20px;border-collapse: collapse;text-align: center}
        #right td {border: 1px solid rgba(255,255,255,.5)}
        #right a {color: #fff}
    </style>
</head>
<body>
<header>
    <span>甘洛县精准扶贫大数据管理平台</span>
    <dl>
        <dt>各乡镇详细资料</dt>
        @for(c in country){
             <dd><a href="/ganluo/village?id=${c.id}">${c.name}</a></dd>
        @}

    </dl>
</header>
<div id="main">
    <div id="left" class="rect">
        <div class="title">精准扶贫基本信息</div>
        <ul class="leader">
            <li>
                <div class="face" style="background-image:url('${info.shuji_pic!}')"></div>
                <div class="txt">县委书记：${info.shuji_name!}</div>
                <div class="txt">手机：${info.shuji_tel!}</div>
            </li><li>
                <div class="face" style="background-image:url('${info.xianzhang_pic!}')"></div>
                <div class="txt">县长：${info.xianzhang_name!}</div>
                <div class="txt">手机：${info.xianzhang_tel!}</div>
            </li>
        </ul>
        <ul class="stat">
            <li><span>总村数：</span>${info.cun_num!}</li><li><span>总人口：</span>${info.people_num!}</li>
            <li><span>贫困村：</span>${info.poor_cun_num!}</li><li><span>贫困户：</span>${info.poor_family_num!}</li>
            <li><span>贫困人口：</span>${info.poor_people_num!}</li><li><span>已脱贫人口：</span>${info.out_poor_people}</li>
            <li><span>待脱贫人口：</span>${info.in_poor_people!}</li>
            <li class="dot"></li>
        </ul>
    </div><div id="right">
      <div class="tips">截止<b id="jiezhi">...</b>已有<b>${info.out_poor_people}</b>人脱贫</div>
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <td rowspan="2">乡镇</td><td rowspan="2">贫困村</td><td colspan="2">2016</td><td colspan="2">2017</td><td colspan="2">2018</td><td colspan="2">2019(计划)</td>
            </tr>
            <tr>
                <td>摘帽村</td>
                <td>脱贫人数</td>
                <td>摘帽村</td>
                <td>脱贫人数</td>
                <td>摘帽村</td>
                <td>脱贫人数</td>
                <td>摘帽村</td>
                <td>脱贫人数</td>
            </tr>
            </thead>
            @for(c in country){
                <tr>
                    <td><a href="/ganluo/village?id=${c.id}">${c.name}</a></td>
                    <td>${c.cuns!}</td>
                    <td>${c.zmc_2016!}</td>
                    <td>${c.out_poor_2016!}</td>
                    <td>${c.zmc_2017!}</td>
                    <td>${c.out_poor_2017!}</td>
                    <td>${c.zmc_2018!}</td>
                    <td>${c.out_poor_2018!}</td>
                    <td>${c.zmc_2019!}</td>
                    <td>${c.out_poor_2019!}</td>
                </tr>
            @}
        </table>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        $("#jiezhi").html(year + "年" + mon + "月" + date + "日");
    })
</script>